<template>
  <div>
    <ul class="turn-ul">
      <li v-for="item in data" :key="item" class="transform-turn">
        <span class="turn-ul_front">{{ item }}</span>
        <span class="turn-ul_back">{{ item + 222 }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [1, 2]
    }
  }
}
</script>
<style scoped>
.turn-ul {
  list-style-type: none;
}
.transform-turn {
  transform-style: preserve-3d;
  /* animation：动画名称 持续时间 运动曲线(匀速linear) 何时开始 播放次数(无限infinite ) 是否反方向(逆播放alternate) 动画起始或者结束的状态(保持forwards/回到起始backwards); */
  animation: transformTurn 4.5s;
  transform-origin: 100% 50%;
  animation-fill-mode: forwards;
}
@keyframes transformTurn {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}
</style>
